import { trendRank } from '@/services/api/api-analysis';
import { DrawerForm } from '@ant-design/pro-form';
import { Avatar, Card, Empty, List, Progress, Skeleton, Spin, Tabs } from 'antd';
import Paragraph from 'antd/lib/typography/Paragraph';
import React, { useEffect, useState } from 'react';
import './TrendCuesRankCardStyle.less';
import styles from './TrendCuesRankCardStyle.less';
import { ProFormRadio } from '@ant-design/pro-components';
interface TrendCuesRankCardProps {
  type: string;
  // organizationTopId: string;
  dates: string[];
}

const TrendCuesRankCard: React.FC<TrendCuesRankCardProps> = (props) => {
  const { type, dates } = props;
  //排行榜的滚动条
  const mylist = document.getElementById('list');
  //前三名奖品图片
  const rankIcon = [
    '/image/排行榜第一名（56X56）.png',
    '/image/排行榜第二名（56X56）.png',
    '/image/排行榜第三名（56X56）.png',
  ];

  const [dataTrendCuesRank, setDataTrendCuesRankState] = useState<AnalysisData.TrendRank[]>([]);

  const [dataTrendCuesRankList, setDataTrendCuesRankListState] = useState<AnalysisData.TrendRank[]>(
    [],
  );

  const [organizationTopId, setorganizationTopIdState] = useState('6000000000002000')

  const [loading, setLoading] = useState(true);
  //加载骨架屏
  const [skeletonLoadding, setSkeletonState] = useState<boolean>(true);
  /**
   * 线索征集
   * @param key
   */
  const loadTrendCuesRankData = async () => {
    try {
      const response = await trendRank({
        type,
        organizationTopId,
        startTime: dates[0],
        endTime: dates[1],
      });
      if (response.code === 0) {
        setDataTrendCuesRankState(response.data);
        setDataTrendCuesRankListState(response.data.slice(0, 10));
      }
      setLoading(false);
      setSkeletonState(false);
    } catch (error) { }
  };
  // const getMaxCount = (i) => {
  //   const maxCount = dataTrendCuesRank[i].data.reduce((max, item) => {
  //     return item.count > max ? item.count : max;
  //   }, 0);
  //   return maxCount
  // }

  //排行榜列表
  const renderRank = (item: AnalysisData.TrendRank, index: number) => {
    let max = 1;
    if (dataTrendCuesRank.length > 0) {
      max = dataTrendCuesRank[0].count + dataTrendCuesRank[0].count / 10;
    }

    return (
      <>
        <Card
          key={item.organizationId}
          style={{
            width: '100%',
            borderRadius: '0',
            boxShadow: 'none',
            padding: '4px',
          }}
          bordered={false}
          bodyStyle={{ height: 22 }}
        >
          <Card.Meta
            avatar={
              <>
                <div style={{ width: '30px' }}>
                  {index <= 2 ? (
                    <Avatar size={38} src={rankIcon[index]}></Avatar>
                  ) : (
                    <div
                      style={{
                        backgroundColor: '#5083E1',
                        borderRadius: '50%',
                        width: '25px',
                        height: '25px',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        marginLeft: '8px',
                        marginTop: '5px',
                        color: 'white',
                      }}
                    >
                      {index + 1}
                    </div>
                  )}
                </div>
              </>
            }
            title={
              <>
                <div
                  style={{
                    marginTop: '9px',
                    width: '100%',
                    display: 'flex',
                  }}
                >
                  {/* <div style={{ width: '20%', fontSize: '11px' }}>{item?.organizationName.length > 6
                    ? item.organizationName.slice(0, 8) + '...'
                    : item.organizationName}
                  </div> */}
                  <Paragraph ellipsis={true} style={{ width: '25%', fontSize: '11px' }}>
                    {item?.organizationName}
                  </Paragraph>

                  <div style={{ marginTop: '-5px', width: '67%' }}>
                    <Progress
                      percent={Math.round((item.count / max) * 100)}
                      format={(percent) =>
                        `${item.count} `
                      }
                      style={{ marginLeft: '5%' }}
                      strokeWidth={11}
                    />
                  </div>
                </div>
              </>
            }
          />
        </Card>
      </>
    );
  };

  useEffect(() => {
    setLoading(true);
    console.log(window.innerWidth);
    loadTrendCuesRankData();
    if (mylist) {
      mylist.scrollTop = 0;
    }
  }, [type, organizationTopId, dates]);

  return (
    <>
      <Skeleton avatar title={false} loading={skeletonLoadding} active>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
          }}
        >
          <span style={{ fontWeight: 'bold', display: 'flex', alignItems: 'center' }}>
            <span>{type === '1' ? '选题计划排行' : type === '2' ? '报送选题排行' : '主动报送排行'}</span>
            <div onClick={() => setorganizationTopIdState('6000000000002000')} style={{ color: organizationTopId === '6000000000002000' ? '#1677FF' : '', marginLeft: 10, cursor: 'pointer' }}>中央媒体</div>
            <div onClick={() => setorganizationTopIdState('6000000000003000')} style={{ color: organizationTopId === '6000000000003000' ? '#1677FF' : '', marginLeft: 10, cursor: 'pointer' }}>市属媒体</div>
          </span>
          <DrawerForm
            title={type === '1' ? '选题计划排行' : type === '2' ? '报送选题排行' : '主动报送排行'}
            trigger={
              <a
                hidden={!(dataTrendCuesRank && dataTrendCuesRank?.length > 0)}
                style={{ fontWeight: 'bold' }}
              >
                详情
              </a>
            }
            submitter={false}
            width={400}
          >
            <ul
              className={styles.rankingList}
              style={{
                margin: '-25px 0 0',
              }}
            >
              {dataTrendCuesRank && dataTrendCuesRank?.length > 0 ? (
                dataTrendCuesRank?.map((item, i) => (
                  <li key={item.organizationId}>
                    <span className={`${styles.rankingItemNumber} ${i < 3 ? styles.active : ''}`}>
                      {i + 1}
                    </span>
                    <span className={styles.rankingItemTitle} title={item.organizationName}>
                      {item.organizationName}
                    </span>
                    <span>
                      {item.count}
                      {type === '1' ? '篇' : type === '2' ? '篇' : '分'}
                    </span>
                  </li>
                ))
              ) : (
                <Empty />
              )}
            </ul>
          </DrawerForm>
        </div>
        <Spin spinning={loading}>
          {/* <ul className={styles.rankingList}>
          {
            dataTrendCuesRank && dataTrendCuesRank?.slice(0, 10)?.length > 0 ? dataTrendCuesRank?.slice(0, 10)?.map((item, i) => (
              <li key={item.organizationId}>
                <span className={`${styles.rankingItemNumber} ${i < 3 ? styles.active : ''}`}>
                  {i + 1}
                </span>
                <span className={styles.rankingItemTitle} title={item.organizationName}>
                  {item.organizationName}
                </span>
                <span>{item.count}{type === "1" ? "篇" : type === "2" ? "篇" : "分"}</span>
              </li>
            )) : <Empty />
          }
        </ul> */}
          <div className="hide-scrollbar" id="list">
            <List<any>
              dataSource={dataTrendCuesRankList}
              style={{
                width: '100%',
                maxHeight: '350px',
                padding: 0,
              }}
              itemLayout="vertical"
              renderItem={(item, index) => renderRank(item, index)}
            />
          </div>
        </Spin>
      </Skeleton>
    </>
  );
};

export default TrendCuesRankCard;
